<template>
	<NavBar :obj="{ title: '确认退款信息', color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="product">
			<view class="big-title flex items-center justify-between">
				<view class="">退款/退货商品</view>
				<view class="edit-btn" @click="goBack">编辑</view>
			</view>
			<up-row customStyle="flex-wrap: wrap;" gutter="10" align="center">
				<up-col span="3" v-for="(item, index) in info.product" :key="index" v-if="info.product?.length > 0">
					<view class="item flex flex-col items-center justify-between">
						<image :src="item.icon" class="icon"></image>
						<view class="price rmb-black">{{ item.vip_price }}</view>
					</view>
				</up-col>
			</up-row>
		</view>

		<view class="layout-box">
			<view class="layout" v-if="info.orderInfo?.status > 2">
				<view class="label">货物状态</view>
				<view class="inp" :class="{ gray: !formRef.product_status }" @click="show.productStatus = true">{{ show.productStatusTitle }}</view>
				<u-icon name="arrow-down" color="#333" size="16" class="arrow-down"></u-icon>
			</view>
			<view class="layout">
				<view class="label">退款原因</view>
				<view class="inp" :class="{ gray: !formRef.reason }" @click="show.reasonShow = true">{{ show.reasonTitle }}</view>
				<u-icon name="arrow-down" color="#333" size="16" class="arrow-down"></u-icon>
			</view>
			<view class="layout">
				<view class="label">退款金额</view>
				<view class="inp theme-color">￥{{ info.refundTotal }}</view>
			</view>
			<view class="tips">不可修改，最多可退￥{{ info.refundTotal }}，包含运费￥{{ info.refundFreight }}</view>
		</view>

		<view class="describe">
			<textarea class="inp" placeholder="请填写退款补充说明(选填)" v-model="formRef.describe"></textarea>
			<Upload v-model="files" :maxCount="5" @change="handleChange" />
		</view>
	</view>

	<view class="fixed-bottom">
		<view class="btn" @click="refundSave">
			<text>确认</text>
		</view>
	</view>

	<up-picker
		:show="show.productStatus"
		:columns="[info.productStatus]"
		keyName="title"
		@close="show.productStatus = false"
		@cancel="show.productStatus = false"
		@confirm="productStatusHandler"
		confirmColor="#FB3204"
		:closeOnClickOverlay="true"
	></up-picker>

	<up-picker
		:show="show.reasonShow"
		:columns="[info.refundReason]"
		keyName="title"
		@close="show.reasonShow = false"
		@cancel="show.reasonShow = false"
		@confirm="reasonHandler"
		confirmColor="#FB3204"
		:closeOnClickOverlay="true"
	></up-picker>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { port, goUrl, goBack, goIndex, loading, closeLoading, hint } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import Upload from '/components/Uploads.vue';
	const info = ref([]);
	const listRef = ref({
		id: '',
		op_ids: '',
		type: ''
	});

	const formRef = ref({
		type: '',
		product_status: '',
		order_id: '',
		id: '',
		reason: '',
		images: '',
		describe: ''
	});

	const show = ref({
		productStatus: false,
		productStatusTitle: '请选择货物状态',
		reasonShow: false,
		reasonTitle: '请选择退款原因'
	});

	const files = ref([]);
	const handleChange = (event) => {
		const images = files.value.map((i) => {
			return i.url;
		});
		formRef.value.images = images.length > 0 ? images.join(',') : '';
	};

	const productStatusHandler = (event) => {
		formRef.value.product_status = event.value[0].id;
		show.value.productStatusTitle = event.value[0].title;
		show.value.productStatus = false;
	};

	const reasonHandler = (event) => {
		formRef.value.reason = event.value[0].title;
		show.value.reasonTitle = event.value[0].title;
		show.value.reasonShow = false;
	};

	onLoad((e) => {
		listRef.value = {
			...e
		};
		formRef.value.order_id = e.id;
		formRef.value.type = e.type;
		formRef.value.id = e.op_ids;
	});

	onShow(() => {
		getRefundFront();
	});

	async function refundSave() {
		if (!formRef.value.product_status && info.value.orderInfo.status > 2) {
			hint('请选择货物状态');
			return false;
		}
		if (!formRef.value.reason) {
			hint('请选择退款原因');
			return false;
		}
		loading();
		let res = await port('refundSave', formRef.value);

		setTimeout(() => {
			closeLoading();
			hint(res.msg);
			goIndex('/pages/refund/my-refund');
		}, 200);
	}

	async function getRefundFront() {
		let res = await port('getRefundFront', listRef.value);
		info.value = res.data;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 44rpx;
	}
	.gray {
		color: #bdbdbd !important;
	}
	.theme-color {
		color: #fb3204 !important;
	}

	.describe {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 30rpx;
	}

	.big-title {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		margin-bottom: 25rpx;
	}
	.edit-btn {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		border-radius: 10rpx;
		border: 1px solid #cccccc;
		padding: 7rpx 20rpx;
	}
	.type {
		margin: 30rpx;
		padding: 24rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.list {
			gap: 22rpx;
			.item {
				padding: 24rpx;
				background: #f4f5f8;
				border-radius: 20rpx;
				.icon {
					width: 56rpx;
					height: 56rpx;
				}
				.lable {
					margin-left: 26rpx;
					.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-bottom: 10rpx;
					}
					.desc {
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.active {
				background: #ffe3dd;
				padding: 22rpx;
				border: 1px solid #fb3204;
				.lable {
					.title {
						color: #fb3204;
					}
				}
			}
		}
	}

	.fill {
		padding-bottom: 220rpx;

		.product {
			margin: 24rpx;
			border-radius: 30rpx;
			background: #ffffff;
			padding: 24rpx 24rpx 0 24rpx;
			.big-title {
				margin-bottom: 35rpx;
			}
			.item {
				margin-bottom: 20rpx;
				.icon {
					width: 156rpx;
					height: 156rpx;
					border-radius: 20rpx;
				}
				.price {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-top: 10rpx;
				}
			}
		}
	}
	.layout-box {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 26rpx 30rpx;
		padding: 0 23rpx;
		.layout {
			padding: 30rpx 0;
			border-top: 1rpx solid #eeeeee;
			display: flex;

			justify-content: space-between;
			&:first-child {
				border-top: none;
				// padding: 30rpx 0 20rpx 0;
			}
			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				width: 27%;
			}
			.inp {
				font-size: 28rpx;
				color: #333333;
				flex: 1 1 0%;
			}
			.place-inp {
				color: #bdbdbd;
				flex: 1 1 0%;
			}
			.textarea {
				height: 120rpx;
			}
			.icon {
				margin-right: 30rpx;
			}
		}
		.tips {
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			padding-bottom: 20rpx;
		}
	}
</style>
